/**
 * Created by jack  one on 2016/9/4.
 */
$(window).load(function () {
    //样式下方点击箭头向左走
    $("#arrRight").mouseenter(function () {
        $(this).css("background-color", "orange");
    })
    $("#arrRight").mouseleave(function () {
        $(this).css("background-color", "#666");
    })
    $("#arrLeft").mouseenter(function () {
        $(this).css("background-color", "orange");
    })
    $("#arrLeft").mouseleave(function () {
        $(this).css("background-color", "#666");
    })
    $("#arrRight").click(function () {
        var length = -parseInt($("#picture1").css("width"));
        var leftLength = parseInt($("#styleFly").css("left"));
        if (leftLength < length) {
            $("#styleFly").css({"left":"0px"},300)
            //主题效果随着箭头运动
            $("#main").animate({"left":"0px"},300)
        } else {
            leftLength += length;
            $("#styleFly").animate({"left":leftLength + "px"},300)
            $("#main").animate({"left":leftLength + "px"},300)
        }
    })
    $("#arrLeft").click(function () {
        var length = -parseInt($("#picture1").css("width"));
        var leftLength = parseInt($("#styleFly").css("left"));
        if (leftLength > length) {
            $("#styleFly").animate({"left":length * 2},300);
            $("#main").animate({"left":length * 2},300);

        } else {
            leftLength += (-length);
            $("#styleFly").animate({"left":leftLength + "px"},300);
            $("#main").animate({"left":leftLength + "px"},300);
        }
    })
    $("#styleFly").on("mouseenter", "li", function () {
        $(this).css("background-color", "orange").siblings().css("background-color", "");
    })
    $("#styleFly").on("mouseleave", "li", function () {
        $(this).css("background-color", "");
    })
    var data1 = [
        {"src": "images/images0/2.jpg", "content": "君子之交淡如水"},
        {"src": "images/images0/3.jpg", "content": "小人之交常戚戚"},
        {"src": "images/images0/4.jpg", "content": "你问我爱你有多深"},
        {"src": "images/images0/5.jpg", "content": "二锅头见证我的心"},
        {"src": "images/images0/6.jpg", "content": "加油吧！"},
        {"src": "images/images0/7.jpg", "content": "奋斗吧！"},
        {"src": "images/images0/8.jpg", "content": "生活就是这么美好！"},
        {"src": "images/images0/9.jpg", "content": "床前明月光"},
        {"src": "images/images0/10.jpg", "content": "疑似地上霜"},
        {"src": "images/images0/11.jpg", "content": "举杯邀明月"},
        {"src": "images/images0/12.jpg", "content": "对影成三人"},
        {"src": "images/images0/13.jpg", "content": "何以解忧"},
        {"src": "images/images0/14.jpg", "content": "唯有杜康"},
        {"src": "images/images0/15.jpg", "content": "不知细叶谁裁出"}
    ]
    var data2 = [
        {"src": "images/images1/2.jpg", "content": "五花马，千金裘"},
        {"src": "images/images1/3.jpg", "content": "忽而将出换美酒"},
        {"src": "images/images1/4.jpg", "content": "与尔同销万古愁"},
        {"src": "images/images1/5.jpg", "content": "明月几时有"},
        {"src": "images/images1/6.jpg", "content": "把酒问青天"},
        {"src": "images/images1/7.jpg", "content": "不知天上宫阙"},
        {"src": "images/images1/8.jpg", "content": "今夕是何年"},
        {"src": "images/images1/9.jpg", "content": "窈窕淑女"},
        {"src": "images/images1/10.jpg", "content": "君子好逑"},
        {"src": "images/images1/11.jpg", "content": "问世间情为何物"},
        {"src": "images/images1/12.jpg", "content": "请把金钱拿过来"},
        {"src": "images/images1/13.jpg", "content": "哈哈哈哈哈哈哈哈"}
    ]
    var data3 = [
        {"src": "images/images2/2.jpg", "content": "老夫撩发少年狂"},
        {"src": "images/images2/3.jpg", "content": "左牵黄，右擒苍"},
        {"src": "images/images2/4.jpg", "content": "锦帽貂裘"},
        {"src": "images/images2/5.jpg", "content": "千骑卷平岗"},
        {"src": "images/images2/6.jpg", "content": "路人借问忙招手"},
        {"src": "images/images2/7.jpg", "content": "怕得鱼惊不应人"},
        {"src": "images/images2/8.jpg", "content": "人生若只如初见"},
        {"src": "images/images2/9.jpg", "content": "枪杆子出政权"},
        {"src": "images/images2/10.jpg", "content": "世上只有妈妈好"},
        {"src": "images/images2/11.jpg", "content": "人之初，性本善"},
    ]
    var data4 = [
        {"src": "images/images3/2.jpg", "content": "苟不教，父之过"},
        {"src": "images/images3/3.jpg", "content": "教不严，师之惰"},
        {"src": "images/images3/4.jpg", "content": "少壮不努力"},
        {"src": "images/images3/5.jpg", "content": "长大敲代码"},
        {"src": "images/images3/6.jpg", "content": "敲完代码去吃饭"},
        {"src": "images/images3/7.jpg", "content": "哈哈哈哈哈哈哈"},
        {"src": "images/images3/8.jpg", "content": "陪伴是最长久的告白"},
        {"src": "images/images3/9.jpg", "content": "一屋不扫何以敢嫁"},
        {"src": "images/images3/10.jpg", "content": "当你坐着火车离开的时候"},
        {"src": "images/images3/11.jpg", "content": "我掩着嘴在偷偷的笑"},
        {"src": "images/images3/12.jpg", "content": "那只是掩饰我内心的痛"},
        {"src": "images/images3/13.jpg", "content": "你在或不在我都在"},
        {"src": "images/images3/14.jpg", "content": "你又不是氧气，缺了你我还可以活!"}

    ]
    var data5 = [
        {"src": "images/images4/2.jpg", "content": "生活不尽人意怎么办？"},
        {"src": "images/images4/3.jpg", "content": "自由落体运动解忧愁"},
        {"src": "images/images4/4.jpg", "content": "非淡泊不以名利"},
        {"src": "images/images4/5.jpg", "content": "非美女不入我心"},
        {"src": "images/images4/6.jpg", "content": "乱花丛中一点绿"},
        {"src": "images/images4/7.jpg", "content": "自在娇莺恰恰啼"},
        {"src": "images/images4/8.jpg", "content": "两岸猿声啼不住"},
        {"src": "images/images4/9.jpg", "content": "司机已到你家口"},
        {"src": "images/images4/10.jpg", "content": "问君能有几多愁"},
        {"src": "images/images4/11.jpg", "content": "恰似一瓶闷酒呛心头"},
        {"src": "images/images4/12.jpg", "content": "你问我爱你有多深"},
        {"src": "images/images4/13.jpg", "content": "大海见证我的心"},
        {"src": "images/images4/14.jpg", "content": "你问我怎样对你好"}
    ]

    function data(id, datas) {
        for (var i = 0; i < datas.length; i++) {
            var ul = $(id);
            var str = '<li class="li1">' +
                '<a href="#"><img src="' + datas[i].src + '" alt=""></a>' +
                '<div>' +
                '<i></i>' +
                '<span>' + datas[i].content + '</span>' +
                '</div>' +
                '</li>';
            ul.append(str);
        }
    }

    data("#meiTu1", data1);
    data("#meiTu2", data2);
    data("#meiTu3", data3);
    data("#meiTu4", data4);
    data("#meiTu5", data5);
    for (var i1 = 1; i1 <= 5; i1++) {
        $("#main #meiTu" + i1).on("mouseenter", "li", function () {
            $(this).find("div").stop(false,false).slideDown(300);
        })
        $("#main #meiTu" + i1).on("mouseleave", "li", function () {
            $(this).find("div").stop(false,false).slideUp(300);
        })
    }
    ////放入大图片里面高亮显示，其他透明度降低
    $(".scrollRun").mouseenter(function () {
        $(this).css("opacity", 1).siblings().css("opacity", 0.3);
    })
    $("#main").mouseleave(function () {
        $(this).children().css("opacity", 1);
    })
    function fn(id){
        var box = document.getElementById(id);
        var height = box.offsetHeight;
        var ul = box.children[0];
        var lis = ul.children;
        var imgWidth = 265;
        var timeUp;
         box.onmouseover=function(){
                clearInterval(timeUp);
                timeUp = setInterval(function(){
                var step = 5;
                var leader = ul.offsetTop;
                leader+=-step;
                ul.style.top=leader+"px";
                if(leader<=-imgWidth*lis.length+height){
                    ul.style.top=0+"px";
                }
            },100)
        }
        box.onmouseout=function(){
            clearInterval(timeUp);
        }
    }
    //for(var i2 =1;i2<=5;i2++){
    //    $("main"+i2).on("mouseenter","ul",function(){
    //        $("main"+i2).animate({"top":"-2373px"},30000);
    //    })
    //}
    //$("#main1").mouseenter(function(){
    //    $("#meiTu1").animate({"top":"-2373px"},30000);
    //})
    $("#main1").mouseenter(function(){
        fn("main1")();
    })
    $("#main2").mouseenter(function(){
        fn("main2")();
    })
    $("#main3").mouseenter(function(){
        fn("main3")();
    })
    $("#main4").mouseenter(function(){
        fn("main4")();
    })
    $("#main5").mouseenter(function(){
        fn("main5")();
    })


    ////尝试滚轮事件
    //var i =1
    //$("#main1").on("wheel", function (e,d) {
    //    var e = e || window.event;
    //    var bDown = true;
    //    bDown = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;
    //    i++;
    //    alert(d);
    //    //e.stopPropagation();    //阻止冒泡没用，这个并不是冒泡
    //    return false;     //阻止默认即可
    //});
    var i =0;
    myAddEvent($("#main1")[0], 'mousewheel', onMouseWheel);
    myAddEvent($("#main1")[0], 'DOMMouseScroll', onMouseWheel);
    function onMouseWheel(e) {
        oEvent = e || event;
        var bDown = true;
        bDown = oEvent.wheelDelta ? oEvent.wheelDelta < 0 : oEvent.detail > 0;
        if (bDown) {
            i++;
            console.log(i);
        }else {
            i--;
            console.log(i);
        }
        if (oEvent.preventDefault) {
            oEvent.preventDefault();
        }
        return false;
    }
})

